<template>
  <div class="app-container">
    <div style="display: flex;">
      <div>
        <label>设备名称：&nbsp;&nbsp;</label>
        <el-select v-model="queryParams.equipmentId" filterable placeholder="请选择">
          <el-option
            v-for="item in equipments"
            :key="item.label"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="block" style="margin-left:2rem;">
        <label>采集时间：&nbsp;&nbsp;</label>
        <el-date-picker
          v-model="collectTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>&nbsp;&nbsp;&nbsp;
      </div>
      <el-button type="primary" plain style="margin-left:1rem;" @click="updateChartData()"> <i class="fa fa-search"></i>查询</el-button>
    </div>
    <div style="margin-top:1rem;">
      <div style="display: flex;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <label>RS485温度曲线图</label>
          </div>
          <div class="text item">
            <div id="tem-container" style="height: 100%"></div>
          </div>
        </el-card>
      </div>
      <div style="display: flex;margin-top:1rem;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <label>420mA模拟温度曲线图</label>
          </div>
          <div class="text item">
            <div id="mnl-container" style="height: 100%"></div>
          </div>
        </el-card>
      </div>
      <div style="display: flex;margin-top:1rem;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <label>420mA电流/电压曲线图</label>
          </div>
          <div class="text item">
            <div id="va-container" style="height: 100%"></div>
          </div>
        </el-card>
      </div>
      <div style="display: flex;margin-top:1rem;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <label>温度误差曲线图</label>
          </div>
          <div class="text item">
            <div id="error-container" style="height: 100%"></div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {getEquipmentList,formatEchartsData} from "@/api/analyse/data";
export default {
  name: "index",
  data() {
    return {
      equipments: [],
      collectTime: [this.getCurrentDate(+1), this.getCurrentDate()],
      queryParams:{
        equipmentId: null,
      },
      chartTemInstance: null,
      chartTemOptions:{
        tooltip: {trigger: 'axis'},
        legend: {data: ['CH1', 'CH2', 'CH3', 'CH4']},
        grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
        toolbox: {feature: {saveAsImage: {}}},
        xAxis: {type: 'category',data: []},
        yAxis: {type: 'value'},
        dataZoom: [{type: 'slider', start: 0, end: 100, filterMode: 'filter', showDataShadow: true, realtime: true}, {type: 'inside'}],
        series: [
          {name: 'CH1', type: 'line', sampling:'average',data: []},
          {name: 'CH2', type: 'line', sampling:'average',data: []},
          {name: 'CH3', type: 'line', sampling:'average',data: []},
          {name: 'CH4', type: 'line', sampling:'average',data: []}
        ]
      },
      chartVaInstance: null,
      chartVaOptions:{
        tooltip: {trigger: 'axis'},
        legend: {data: ['CH1', 'CH2', 'CH3', 'CH4']},
        grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
        toolbox: {feature: {saveAsImage: {}}},
        xAxis: {type: 'category',data: []},
        yAxis: {type: 'value'},
        dataZoom: [{type: 'slider', start: 0, end: 100, filterMode: 'filter', showDataShadow: true, realtime: true}, {type: 'inside'}],
        series: [
          {name: 'CH1', type: 'line', sampling:'average',data: []},
          {name: 'CH2', type: 'line', sampling:'average',data: []},
          {name: 'CH3', type: 'line', sampling:'average',data: []},
          {name: 'CH4', type: 'line', sampling:'average',data: []}
        ]
      },
      chartMnlInstance: null,
      chartMnlOptions:{
        tooltip: {trigger: 'axis'},
        legend: {data: ['CH1', 'CH2', 'CH3', 'CH4']},
        grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
        toolbox: {feature: {saveAsImage: {}}},
        xAxis: {type: 'category',data: []},
        yAxis: {type: 'value'},
        dataZoom: [{type: 'slider', start: 0, end: 100, filterMode: 'filter', showDataShadow: true, realtime: true}, {type: 'inside'}],
        series: [
          {name: 'CH1', type: 'line', sampling:'average', data: []},
          {name: 'CH2', type: 'line', sampling:'average', data: []},
          {name: 'CH3', type: 'line', sampling:'average', data: []},
          {name: 'CH4', type: 'line', sampling:'average', data: []}
        ]
      },
      chartErrorInstance: null,
      chartErrorOptions:{
        tooltip: {trigger: 'axis'},
        legend: {data: ['CH1', 'CH2', 'CH3', 'CH4']},
        grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
        toolbox: {feature: {saveAsImage: {}}},
        xAxis: {type: 'category',data: []},
        yAxis: {type: 'value'},
        dataZoom: [{type: 'slider', start: 0, end: 100, filterMode: 'filter', showDataShadow: true, realtime: true}, {type: 'inside'}],
        series: [
          {name: 'CH1', type: 'line', sampling:'average',data: []},
          {name: 'CH2', type: 'line', sampling:'average',data: []},
          {name: 'CH3', type: 'line', sampling:'average',data: []},
          {name: 'CH4', type: 'line', sampling:'average',data: []}
        ]
      }
    };
  },
  mounted(){
    this.initChartData();
  },
  created() {
    this.equipmentList();
  },
  methods: {
    getCurrentDate(offset = 0) {
      const now = new Date();
      now.setHours(now.getHours() - offset * 24); // 减去相应小时数
      return this.formatDateTime(now);
    },
    formatDateTime(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    equipmentList(){
      getEquipmentList().then(res=>{
        this.queryParams.equipmentId = res.data[0].equipmentId;
        res.data.forEach(result=>{
          this.equipments.push({
            label:result.equipmentName,
            value:result.equipmentId
          });
        })
      })
    },
     initChartData(){
      this.chartTemInstance = echarts.init(document.getElementById('tem-container'));
      this.chartTemInstance.setOption(this.chartTemOptions);
      this.chartMnlInstance = echarts.init(document.getElementById('mnl-container'));
      this.chartMnlInstance.setOption(this.chartMnlOptions);
      this.chartVaInstance = echarts.init(document.getElementById('va-container'));
      this.chartVaInstance.setOption(this.chartVaOptions);
      this.chartErrorInstance = echarts.init(document.getElementById('error-container'));
      this.chartErrorInstance.setOption(this.chartErrorOptions);
    },
    updateChartData() {
      //清除浏览器历史缓存的数据点
      this.chartTemInstance.clear();
      this.chartMnlInstance.clear();
      this.chartVaInstance.clear();
      this.chartErrorInstance.clear();
      //显示Loading
      this.chartTemInstance.showLoading();
      this.chartMnlInstance.showLoading();
      this.chartVaInstance.showLoading();
      this.chartErrorInstance.showLoading();
      setTimeout(() => {
        formatEchartsData(this.addDateRange(this.queryParams, this.collectTime)).then(response=>{
          if(response.data.xAxisList != undefined && response.data.xAxisList!=null && response.data.xAxisList!=''){
            // RS485温度曲线图
            this.chartTemInstance = echarts.getInstanceByDom(document.getElementById('tem-container'));//流式加载数据,以提高性能
            this.chartTemOptions.xAxis.data = response.data.xAxisList;
            this.chartTemOptions.series[0].data = response.data.CH1.ch1_eqTemList;
            this.chartTemOptions.series[1].data = response.data.CH2.ch2_eqTemList;
            this.chartTemOptions.series[2].data = response.data.CH3.ch3_eqTemList;
            this.chartTemOptions.series[3].data = response.data.CH4.ch4_eqTemList;
            this.chartTemInstance.hideLoading();
            this.chartTemInstance.setOption(this.chartTemOptions);
            // 420mA模拟温度曲线图
            this.chartMnlInstance = echarts.getInstanceByDom(document.getElementById('mnl-container'));
            this.chartMnlOptions.xAxis.data = response.data.xAxisList;
            this.chartMnlOptions.series[0].data = response.data.CH1.ch1_mnlTemList;
            this.chartMnlOptions.series[1].data = response.data.CH2.ch2_mnlTemList;
            this.chartMnlOptions.series[2].data = response.data.CH3.ch3_mnlTemList;
            this.chartMnlOptions.series[3].data = response.data.CH4.ch4_mnlTemList;
            this.chartMnlInstance.hideLoading();
            this.chartMnlInstance.setOption(this.chartMnlOptions);
            // 420mA电流/电压曲线图
            this.chartVaInstance = echarts.getInstanceByDom(document.getElementById('va-container'));
            this.chartVaOptions.xAxis.data = response.data.xAxisList;
            this.chartVaOptions.series[0].data = response.data.CH1.ch1_avListList;
            this.chartVaOptions.series[1].data = response.data.CH2.ch2_avListList;
            this.chartVaOptions.series[2].data = response.data.CH3.ch3_avListList;
            this.chartVaOptions.series[3].data = response.data.CH4.ch4_avListList;
            this.chartVaInstance.hideLoading();
            this.chartVaInstance.setOption(this.chartVaOptions);
            // 温度误差曲线图
            this.chartErrorInstance = echarts.getInstanceByDom(document.getElementById('error-container'));
            this.chartErrorOptions.xAxis.data = response.data.xAxisList;
            this.chartErrorOptions.series[0].data = response.data.CH1.ch1_temErrorList;
            this.chartErrorOptions.series[1].data = response.data.CH2.ch2_temErrorList;
            this.chartErrorOptions.series[2].data = response.data.CH3.ch3_temErrorList;
            this.chartErrorOptions.series[3].data = response.data.CH4.ch4_temErrorList;
            this.chartErrorInstance.hideLoading();
            this.chartErrorInstance.setOption(this.chartErrorOptions);
          }else{
            this.chartTemInstance.hideLoading();
            this.chartMnlInstance.hideLoading();
            this.chartVaInstance.hideLoading();
            this.chartErrorInstance.hideLoading();
            this.$modal.msgError("此设备无效！")
          }
        })
      },2000)

    }
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
  height:20rem;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
}
</style>
